import React from 'react';
import { Icon,Item } from 'semantic-ui-react'
import {withRouter} from "react-router-dom";
import axios from 'axios';

class HouseList extends React.Component{
    constructor(props){
        super(props)
        this.state={
           list:[]
        }
    }
    componentDidMount(){
        const {query} = this.props.location.state;
        axios.post('homes/list',{
          home_type: query.homeType
        }).then(result=>{
          if(result.meta.status === 200) {
              console.log(result.data)
            this.setState({
              list: result.data
            });
          }
        })
    }
    hide = ()=>{
    //  this.props.history.push('/home') 或者        
     this.props.history.goBack()
    }
    render(){
        const {query} = this.props.location.state // 路由传参携带过来的参数从location里面获取(路由传参和父子组件传值都是从实例的props中获取数据,不过一个被export default导出的HouseList类要么作为
        //路由的component=HouseList来使用要么作为一个组件<HouseList/>来使用)
        const listInfo = this.state.list.map(item=>{
            return (
              <Item key={item.id}>
                <Item.Image src={'http://127.0.0.1:8086/public/home.png'}/>
                <Item.Content>
                  <Item.Header>{item.home_name}</Item.Header>
                  <Item.Meta>
                    <span className='cinema'>{item.home_desc}</span>
                  </Item.Meta>
                  <Item.Description>
                    {item.home_tags}
                  </Item.Description>
                  <Item.Description>{item.home_price}</Item.Description>
                </Item.Content>
              </Item>
            );
          });
        return(
            <div className='home-calc'>
                <div className = "home-calc-title">
                    <Icon onClick={this.hide} name='angle left' size = 'large'/>{query.menuName}
                </div> 
                <div className = "map-calc-content">
                <Item.Group divided unstackable>
                    {listInfo}
                </Item.Group>
                </div>
            </div>
            )
    }
}
export default withRouter(HouseList) //只要是使用编程式路由都需要这样做